<template>
	<div>
		<el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab" @tab-click="tabData">
			<el-card shadow="never">
				<div style="text-align: left;">
					<div v-if="showAgent" style="display: flex;align-items: center;color: #606266;font-size: 14px;">
						<div>代理商信息</div>
						<el-input class="x_soso" v-model="search.searchInput" placeholder="请输入您要查询的代理商ID/名称或电话"></el-input>
						<el-button type="primary" @click="searchList">查询</el-button>
					</div>
					<div v-else style="display: flex;align-items: center;font-size: 14px;color: #606266;">
						<div>代理商信息</div>
						<el-input class="x_soso" style="" v-model="nameAgent" :disabled="true"></el-input>
						<!-- <el-input class="x_soso" v-else v-model="nameAgent" ></el-input> -->
					</div>
					<div v-if="showAgent" style="display: flex;align-items: center;color: #606266;margin:10px 0;font-size: 14px;">
						<div style="display: flex;align-items: center;">
							<div style="margin-right: 13px;">注册时间</div>
							<el-date-picker class="x_soso" v-model="valueDate" @change="timeSeach" type="daterange" value-format="yyyy-MM-dd"
							 range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
						</div>
						<div class="showAgent" v-if="showAgent">
							<div style="display: flex;align-items: center;">
								<div style="display: flex;align-items: center;">
									<div>签约状态</div>
									<el-select class="x_soso" filterable v-model="search.sign" placeholder="已签约" @change="timeSeach">
										<el-option v-for="item in openList" :key="item.id" :label="item.name" :value="item.id"></el-option>
									</el-select>
								</div>
								<div style="display: flex;align-items: center;">
									<div>归属运营商</div>
									<el-select class="x_soso" filterable v-model="search.schemeId" placeholder="请选择归属运营商" @change="timeSeach">
										<el-option v-for="item in agentList" :key="item.schemeId" :label="item.schemeName" :value="item.schemeId"></el-option>
									</el-select>
								</div>
							</div>
						</div>
					</div>
					<div v-if="showAgent" style="display: flex;align-items: center;color: #606266;margin:10px 0;font-size: 14px;">
						<div style="display: flex;align-items: center;">
							<div>代理商管理</div>
							<div style="display: flex;align-items: center;margin-left: 25px;">
								<span class="rank" v-for="(item, index) in tabsAgent" :key="index" :class="{ active: index == num }" @click="tabTitleAgent(index, item.id)">
									{{ item.name }}
								</span>
							</div>
						</div>
					</div>
					<div v-if="moldTypeTime" style="display: flex;align-items: center;font-size: 14px;color: #606266;margin-top: 10px;">
						<div style="margin-right: 13px;">注册时间</div>
						<el-date-picker class="x_soso" v-model="valueDate" @change="timeSeachLists" type="daterange" value-format="yyyy-MM-dd"
						 range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
					</div>
					<div v-if="moldType" style="display: flex;align-items: center;color: #606266;margin:10px 0;font-size: 14px;">
						<div style="display: flex;align-items: center;">
							<div>{{ mold }}</div>
							<div style="display: flex;align-items: center;margin-left: 25px;">
								<span class="rank" v-for="(item, index) in tabs" :key="index" :class="{ active: index == num }" @click="tabTitle(index, item.id)">
									{{ item.name }}
								</span>
							</div>
						</div>
					</div>
				</div>
				<div style="text-align: left;margin-top: 30px;">
					<el-button type="primary" @click="reloadVal" v-loading.fullscreen.lock="fullscreenLoading">刷新</el-button>
				</div>
				<div style="clear:both"></div>
			</el-card>
			<el-tab-pane v-for="(item, index) in editableTabs" :key="index" :label="item.title" :name="item.name">
				<div v-if="showAgent" v-loading="loading">
					<el-table :data="tableDataAgent" @sort-change="sortChange" style="width: 100%;margin-top: 20px">
						<el-table-column type="index" label="序号" width="50"></el-table-column>
						<el-table-column label="代理商ID/名称/手机号" align="left" width="250" prop="agentInfoDTO">
							<template slot-scope="scope">
								<div style="display: flex;align-items: center;justify-content: center;">
									<img class="img_header" v-if="scope.row.agentInfoDTO.ageImg" :src="scope.row.agentInfoDTO.ageImg" />
									<img class="img_header" v-else src="../../../assets/dailishang_touxiang_nor.png" />
									<div class="agent_base" style="width: 80%;">
										<div class="agent_base age_name">{{ scope.row.agentInfoDTO.ageName }}</div>
										<div class="agent_base">{{ scope.row.agentInfoDTO.agePhone }}</div>
										<div class="agent_base">ID:{{ scope.row.agentInfoDTO.ageId }}</div>
									</div>
								</div>
							</template>
						</el-table-column>
						<el-table-column label="归属运营商名称" align="center" width="200" prop="schemeName"></el-table-column>
						<el-table-column label="创建时间" :sortable="'custom'" align="center" width="200" prop="createTime"></el-table-column>
						<el-table-column label="签约信息" align="center" width="360" prop="agentAuthDTO">
							<template slot-scope="scope">
								<div style="display: flex;align-items: center;justify-content: center;">
									<div class="agent_base">
										<div class="agent_base contract_no" v-if="scope.row.agentAuthDTO.contractNo">合同编码：{{ scope.row.agentAuthDTO.contractNo }}</div>
										<div class="agent_base" v-else></div>
										<div class="agent_base" v-if="scope.row.agentAuthDTO.startTime">
											{{ scope.row.agentAuthDTO.startTime }}—{{ scope.row.agentAuthDTO.endTime }}
										</div>
										<div class="agent_base" v-else></div>
										<div class="agent_base" v-if="scope.row.agentAuthDTO.expiration">签约有效期：{{ scope.row.agentAuthDTO.expiration }}个月</div>
										<div class="agent_base" v-else></div>
										<div class="agent_base contract_no" v-if="scope.row.agentAuthDTO.signBond">保证金缴纳：{{ scope.row.agentAuthDTO.signBond }}元</div>
										<div class="agent_base contract_no" v-else>保证金缴纳：未缴纳</div>
									</div>
								</div>
							</template>
						</el-table-column>
						<el-table-column label="店长数量" :sortable="'custom'" align="center" width="150" prop="memAmount">
							<template slot-scope="scope">
								<div style="color: #6435C9;">{{ scope.row.memAmount }}</div>
							</template>
						</el-table-column>
						<el-table-column label="门店数量" :sortable="'custom'" align="center" width="150" prop="shopAmount">
							<template slot-scope="scope">
								<div style="color: #6435C9;">{{ scope.row.shopAmount }}</div>
							</template>
						</el-table-column>
						<el-table-column label="客户数量" :sortable="'custom'" align="center" width="150" prop="personAmount">
							<template slot-scope="scope">
								<div style="color: #6435C9;">{{ scope.row.personAmount }}</div>
							</template>
						</el-table-column>
						<el-table-column label="徒弟数量" :sortable="'custom'" align="center" width="150" prop="apprenticeAmount">
							<template slot-scope="scope">
								<div style="color: #6435C9;">{{ scope.row.apprenticeAmount }}</div>
							</template>
						</el-table-column>
						<el-table-column label="签约设备数量" :sortable="'custom'" align="center" width="150" prop="equAmount">
							<template slot-scope="scope">
								<div style="color: #6435C9;">{{ scope.row.equAmount }}</div>
							</template>
						</el-table-column>
						<el-table-column label="累计锁点" :sortable="'custom'" align="center" width="150" prop="dotLock">
							<template slot-scope="scope">
								<div style="color: #6435C9;">{{ scope.row.dotLock }}</div>
							</template>
						</el-table-column>
						<el-table-column label="累计分润" :sortable="'custom'" align="center" width="150" prop="divided">
							<template slot-scope="scope">
								<div style="color: #6435C9;">{{ scope.row.divided }}</div>
							</template>
						</el-table-column>
						<el-table-column label="累计收入" :sortable="'custom'" align="center" width="150" prop="income">
							<template slot-scope="scope">
								<div style="color: #6435C9;">{{ scope.row.income }}</div>
							</template>
						</el-table-column>
						<el-table-column label="账户余额" :sortable="'custom'" align="center" width="150" prop="balance">
							<template slot-scope="scope">
								<div style="color: #6435C9;">{{ scope.row.balance }}</div>
							</template>
						</el-table-column>
						<el-table-column label="归属师父ID/名称/手机号" align="left" width="240" prop="schemeName">
							<template slot-scope="scope">
								<div style="display: flex;align-items: center;justify-content: center;">
									<!-- <img class="img_header" v-if="scope.row.parentAgentInfoDTO.ageImg" :src="scope.row.parentAgentInfoDTO.parentImg" />
									<img class="img_header" v-else src="../../../assets/dailishang_touxiang_nor.png" /> -->
									<div v-if="scope.row.parentAgentInfoDTO.parentId" class="agent_base" style="width: 80%;">
										<div class="agent_base" style="color: #6435C9;">{{ scope.row.parentAgentInfoDTO.parentName }}</div>
										<div class="agent_base">{{ scope.row.parentAgentInfoDTO.parentPhone }}</div>
										<div class="agent_base">ID:{{ scope.row.parentAgentInfoDTO.parentId }}</div>
									</div>
									<div v-else style="width: 80%;">无</div>
								</div>
							</template>
						</el-table-column>
						<el-table-column fixed="right" label="停启用状态" align="center" width="150">
							<template slot-scope="scope">
								<el-switch v-model="scope.row.isEnabled" active-color="#13ce66" inactive-color="#dedede" :active-value="true"
								 :inactive-value="false" @change="changeSwitch(scope.$index, scope.row)"></el-switch>
							</template>
						</el-table-column>
						<el-table-column fixed="right" label="操作" align="center" width="100">
							<template slot-scope="scope">
								<div style="color: #716ACA;" @click="particulars(scope.$index, scope.row)">详情</div>
							</template>
						</el-table-column>
					</el-table>
					<div style="margin-top: 20px;text-align: right">
						<el-pagination background @current-change="agentDataList" :current-page="page.page" :page-size="page.pagesize"
						 layout="prev, pager, next, jumper, total" :total="page.count"></el-pagination>
					</div>
				</div>
				<div v-else v-loading="loading">
					<el-table :data="tableData" style="width: 100%; margin-top: 20px">
						<el-table-column type="index" label="序号" width="50"></el-table-column>
						<template v-for="(col, index) in selectTitleList">
							<el-table-column :prop="col.prop" :label="col.label" :key="index" align="center" :width="col.width" v-if="index == 1">
								<template slot-scope="scope">
									<span v-if="scope.row.tel">{{scope.row.tel}}</span>
									<span v-if="scope.row.amount">{{scope.row.amount}}</span>
									<span v-if="scope.row.memPhone">{{scope.row.memPhone}}</span>
									<span v-if="scope.row.personPhone">{{scope.row.personPhone}}</span>
									<span v-if="scope.row.equName">{{scope.row.equName}}</span>
									<span v-if="scope.row.phone">{{scope.row.phone}}</span>
									<span v-if="scope.row.empName">{{scope.row.empName}}</span>
									<span v-if="scope.row.dotPrice">{{scope.row.dotPrice}}</span>
									<span v-if="scope.row.singleUseDate">{{scope.row.singleUseDate}}</span>
									<span v-if="scope.row.parentId">{{scope.row.parentId}}</span>
									<img class="img_header" v-if="scope.row.shopLogo" :src="scope.row.shopLogo" alt="">
									<span></span>
								</template>
							</el-table-column>
							<el-table-column :prop="col.prop" :label="col.label" :key="index" align="center" :width="col.width" v-else-if="index == 2">
								<template slot-scope="scope">
									<span v-if="scope.row.addorsub == 1">入账</span>
									<span v-if="scope.row.addorsub == 2">出账</span>
									<span v-if="scope.row.personBirthday">{{scope.row.personBirthday}}</span>

									<!-- <span v-if="scope.row.shopName">{{scope.row.shopName}}</span> -->
									<span v-if="scope.row.applyTime">{{scope.row.applyTime}}</span>
									<span v-if="scope.row.dotNum">{{scope.row.dotNum}}</span>
									<span v-if="scope.row.equMac">{{scope.row.equMac}}</span>
									<span v-if="scope.row.firstIntoTime">{{scope.row.firstIntoTime}}</span>
									<span v-if="scope.row.emplyee">{{scope.row.emplyee}}</span>

									<img class="img_header" v-if="scope.row.ageQrcodeImg" :src="scope.row.ageQrcodeImg" alt="">
									<img class="img_header" v-if="scope.row.memImg" :src="scope.row.memImg" alt="">
									<img class="img_header" v-if="scope.row.shopPromotionCode" :src="scope.row.shopPromotionCode" alt="">
									<span></span>
								</template>
							</el-table-column>
							<el-table-column :prop="col.prop" :label="col.label" :key="index" align="center" :width="col.width" v-else-if="index == 3">
								<template slot-scope="scope">
									<!-- 门店账单收入130 购点直接分润 131购点间接分润 132199退回收入  提现失败200 支出 提现100 收入 -->
									<span v-if="scope.row.businessType == 100">收入</span>
									<span v-if="scope.row.businessType == 110">充点</span>
									<span v-if="scope.row.businessType == 120">开单锁定增加</span>
									<span v-if="scope.row.businessType == 130">门店账单收入</span>
									<span v-if="scope.row.businessType == 131">购点直接分润</span>
									<span v-if="scope.row.businessType == 132">购点间接分润</span>
									<span v-if="scope.row.businessType == 170">店长购点收入</span>
									<span v-if="scope.row.businessType == 200">支出</span>
									<span v-if="scope.row.businessType == 210">锁定点数消耗</span>
									<span v-if="scope.row.businessType == 220">工次消耗</span>
									<span v-if="scope.row.businessType == 230">代理商支出</span>
									<span v-if="scope.row.businessType == 270">一级代理商分润支出</span>
									<span v-if="scope.row.businessType == 271">二级代理商分润支出</span>
									<span v-if="scope.row.businessType == 299">退款支出</span>
									<!-- <span v-if="scope.row.orderType == 10">充值</span>
									<span v-if="scope.row.orderType == 11">加盟服务费</span>
									<span v-if="scope.row.orderType == 12">挂靠服务费</span> -->
									<img class="img_header" v-if="scope.row.qrcodeImg" :src="scope.row.qrcodeImg" alt="">
									<img class="img_header" v-if="scope.row.equImg" :src="scope.row.equImg" alt="">
									<span v-if="scope.row.lastIntoTime">{{scope.row.lastIntoTime}}</span>
									<span v-if="scope.row.startTime">{{scope.row.startTime}}</span>
									<span v-if="scope.row.gender == 1">男</span>
									<span v-if="scope.row.gender == 0">女</span>
									<span v-if="scope.row.tel">{{scope.row.tel}}</span>
									<span v-if="scope.row.equModel">{{scope.row.equModel}}</span>
									<span v-if="scope.row.useExplain">{{scope.row.useExplain}}</span>
									<span v-if="scope.row.applyOkTime">{{scope.row.applyOkTime}}</span>
									<span v-if="scope.row.dotLockSum">{{scope.row.dotLockSum}}</span>
									<span v-if="scope.row.addressDetail">{{scope.row.addressDetail}}</span>
								</template>
							</el-table-column>
							<el-table-column :prop="col.prop" :label="col.label" align="center" :key="index" :width="col.width" v-else></el-table-column>
						</template>
					</el-table>
					<div style="margin-top: 20px;text-align: right">
						<el-pagination background @current-change="columnFindsss" :current-page="pages.page" :page-size="pages.pagesize"
						 layout="prev, pager, next, jumper, total" :total="pages.count"></el-pagination>
					</div>
				</div>

				<!-- {{ item.content }} -->
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
	import Cookie from 'js-cookie';
	import {
		agentListData,
		agentStatus,
		getAllList,
		agentAccountFlowList,
		agentDividedList,
		agentDotLockFlowList,
		agentIncomeList,
		agentMemList,
		agentShopList,
		agentPerdonList,
		agentApprenticeList,
		agentEquList,
		agentOrderList,
		agentEquUseList,
		agentApplyItemList,
		agentDotUseList
	} from '../../../server/index.js';
	export default {
		inject: ['reload'],
		data() {
			return {
				showAgent: true,
				fullscreenLoading: false,
				search: {}, //查询
				list: [], // 存cook数组getAgentDotLockFlowList
				apiList: [
					agentAccountFlowList,
					agentDividedList,
					agentDotLockFlowList,
					agentIncomeList,
					agentMemList,
					agentShopList,
					agentPerdonList,
					agentApprenticeList,
					agentEquList,
					agentOrderList,
					agentApplyItemList,
					agentDotUseList,
					agentEquUseList
				], //接口名称
				// 分页
				tableDataAgent: [],
				spanArr: [],
				tableData: [],
				tabsAgent: [{
					id: '0',
					name: '全部'
				}, {
					id: '1',
					name: '一级'
				}, {
					id: '2',
					name: '二级'
				}],
				tabs: [],
				mold: '',
				moldType: true,
				moldTypeTime: false,
				loading: true,
				page: {
					count: 0,
					pagesize: 10,
					page: 1
				},
				pages: {
					count: 0,
					pagesize: 10,
					page: 1
				},
				// 时间
				valueDate: [],
				num: 0,
				openList: [{
						id: 1,
						name: '已签约'
					},
					{
						id: 0,
						name: '未签约'
					}
				],
				agentList: [],
				// 页面数据
				titleList: [
					[
						// { prop: 'shopName', label: '门店名称', width: '150' },
						{
							prop: 'memName',
							label: '店主姓名',
							width: '150'
						},
						{
							prop: 'amount',
							label: '金额',
							width: '150'
						},
						{
							prop: 'addorsub',
							label: '收支',
							width: '150'
						},
						{
							prop: 'businessType',
							label: '业务类型',
							width: '150'
						},
						{
							prop: 'createTime',
							label: '创建时间'
						}
					],
					[
						// { prop: 'shopName', label: '门店名称', width: '150' },
						{
							prop: 'memName',
							label: '店主姓名',
							width: '150'
						},
						{
							prop: 'amount',
							label: '金额',
							width: '150'
						},
						{
							prop: 'addorsub',
							label: '收支',
							width: '150'
						},
						{
							prop: 'businessType',
							label: '业务类型',
							width: '150'
						},
						{
							prop: 'createTime',
							label: '创建时间'
						}
					],
					[
						// { prop: 'shopName', label: '门店名称', width: '150' },
						{
							prop: 'memName',
							label: '店主姓名',
							width: '150'
						},


						{
							prop: 'amount',
							label: '点数',
							width: '150'
						},
						{
							prop: 'addorsub',
							label: '收支',
							width: '150'
						},
						{
							prop: 'businessType',
							label: '业务类型',
							width: '150'
						},
						{
							prop: 'createTime',
							label: '创建时间'
						}
					],
					[{
							prop: 'memName',
							label: '店主姓名',
							width: '150'
						},
						{
							prop: 'amount',
							label: '金额',
							width: '150'
						},
						{
							prop: 'addorsub',
							label: '收支',
							width: '150'
						},
						{
							prop: 'businessType',
							label: '业务类型',
							width: '150'
						},
						{
							prop: 'createTime',
							label: '创建时间'
						}
					],
					[{
							prop: 'memName',
							label: '真实姓名',
							width: '150'
						},
						{
							prop: 'memPhone',
							label: '联系电话',
							width: '200'
						},
						{
							prop: 'memImg',
							label: '头像',
							width: '200'
						},
						{
							prop: 'qrcodeImg',
							label: '二维码',
							width: '200'
						},
						// { prop: 'position', label: '详细地址', width: '200' },
						{
							prop: 'createTime',
							label: '创建时间'
						}
					],
					[{
							prop: 'shopName',
							label: '店铺名字',
							width: '200'
						},
						// { prop: 'shopImg', label: '门头照',width:'150' },
						{
							prop: 'shopLogo',
							label: '店铺Logo',
							width: '150'
						},
						{
							prop: 'shopPromotionCode',
							label: '门店推广码',
							width: '150'
						},
						// { prop: 'tel', label: '座机号', width: '150' },
						// { prop: 'shopType', label: '店铺类型' ,width:'150'},
						// { prop: 'licenseCode', label: '营业执照编号', width: '250' },
						{
							prop: 'position',
							label: '详细地址',
							width: '250'
						},
						{
							prop: 'createTime',
							label: '创建时间'
						}
					],
					[{
							prop: 'personName',
							label: '用户姓名',
							width: '150'
						},
						{
							prop: 'personPhone',
							label: '用户电话',
							width: '180'
						},
						// { prop: 'personBirthday', label: '用户生日', width: '180' },
						// { prop: 'labelStatus', label: '用户状态', width: '150' },
						// { prop: 'gender', label: '用户性别', width: '120' },
						// { prop: 'skinAge', label: '肤龄', width: '120' },
						{
							prop: 'firstIntoTime',
							label: '首次到店时间',
							width: '200'
						},
						{
							prop: 'lastIntoTime',
							label: '最近到店时间',
							width: '200'
						},
						{
							prop: 'createTime',
							label: '创建时间'
						}
					],
					[{
							prop: 'ageName',
							label: '真实姓名',
							width: '150'
						},
						{
							prop: 'parentId',
							label: '归属师傅ID',
							width: '150'
						},
						// { prop: 'ageImg', label: '头像' ,width:'150'},
						{
							prop: 'ageQrcodeImg',
							label: '个人二维码',
							width: '150'
						},
						{
							prop: 'addessDetail',
							label: '详细地址',
							width: '250'
						},
						// { prop: 'authStatus', label: '认证状态' ,width:'150'},
						// { prop: 'signStatus', label: '签约状态',width:'150' },
						{
							prop: 'createTime',
							label: '创建时间'
						}
					],
					[{
							prop: 'equId',
							label: '设备编号',
							width: '150'
						},
						{
							prop: 'equName',
							label: '设备名称',
							width: '150'
						},
						// { prop: 'equType', label: '设备类型', width: '150' },
						// { prop: 'tdCode', label: '二维码编号', width: '150' },
						{
							prop: 'equMac',
							label: '连接地址',
							width: '250'
						},
						{
							prop: 'equModel',
							label: '设备型号',
							width: '150'
						},
						// { prop: 'isRun', label: '是否运行' ,width:'150'},
						// { prop: 'equStatus', label: '设备状态' ,width:'150'},
						// { prop: 'position', label: '详细地址', width: '250' },
						// { prop: 'equImg', label: '图片' ,width:'150'},
						// { prop: 'equDetail', label: '设备详情', width: '150' },
						{
							prop: 'createTime',
							label: '创建时间'
						}
					],
					[{
							prop: 'openOrderId',
							label: '开单ID',
							width: '150'
						},
						{
							prop: 'personIdName',
							label: '店长名称',
							width: '150'
						},
						{
							prop: 'emplyee',
							label: '雇员名称',
							width: '150'
						},
						// { prop: 'ageId', label: '', width: '150' },
						// { prop: 'status', label: '订单状态',width:'150' },
						// { prop: 'shopName', label: ' 店铺名称', width: '150' },
						{
							prop: 'dotLockSum',
							label: '锁定点数',
							width: '150'
						},
						// { prop: 'orderType', label: '订单类型' ,width:'150'},
						{
							prop: 'createTime',
							label: '创建时间'
						}
					],
					[{
							prop: 'personName',
							label: '申请人姓名',
							width: '150'
						},
						{
							prop: 'phone',
							label: '申请人电话',
							width: '200'
						},
						{
							prop: 'applyTime',
							label: '申请时间',
							width: '200'
						},
						{
							prop: 'applyOkTime',
							label: '确认到店时间',
							width: '200'
						},
						// { prop: 'applyType', label: ' 预约类型' ,width:'150'},
						// { prop: 'applyStatus', label: '申请状态',width:'150' },
						// { prop: 'auditResult', label: '审核结论', width: '150' },
						{
							prop: 'createTime',
							label: '创建时间'
						}
					],
					[{
							prop: 'equId',
							label: '设备ID',
							width: '150'
						},
						// { prop: 'useType', label: '使用类型' ,width:'150'},
						// { prop: 'useStatus', label: '使用状态' ,width:'150'},
						{
							prop: 'dotPrice',
							label: '点数价格',
							width: '150'
						},
						{
							prop: 'dotNum',
							label: ' 点数数量',
							width: '150'
						},
						{
							prop: 'useExplain',
							label: '使用说明',
							width: '150'
						},
						{
							prop: 'createTime',
							label: '创建时间'
						}
					],
					[{
							prop: 'equId',
							label: '设备ID',
							width: '150'
						},
						// { prop: 'useType', label: '使用类型' ,width:'150'},
						// { prop: 'useType', label: '使用状态' ,width:'150'},
						{
							prop: 'singleUseDate',
							label: '单次使用时间',
							width: '200'
						},
						{
							prop: 'dotNum',
							label: ' 点数数量',
							width: '150'
						},
						{
							prop: 'startTime',
							label: ' 开始时间',
							width: '200'
						},
						{
							prop: 'endTime',
							label: '结束时间'
						},
						// { prop: 'useExplain', label: '使用说明' }
					]
				],

				selectTitleList: [],
				id: 4,
				editableTabsValue: '1',
				editableTabs: [{
					title: '代理商管理',
					name: '1',
					content: ''
				}],
				tabIndex: 2,
				nameAgent: '',
				idItem: '',
				urlApi: '',
				typeVal: ''
			};
		},
		mounted() {
			const activeName = localStorage.getItem('activeName')
			const index = localStorage.getItem('index')
			if (activeName) {
				if (activeName == '1') {
					this.listTab();
					this.tabData({index: 0})
				}
				else {
					this.listTab(true, index-1);
				}
				this.editableTabsValue = activeName
				localStorage.removeItem('activeName')
			}
			else {
				this.listTab();
				this.getListData();
			}
		},
		methods: {
			//点击查询
			searchList() {
				this.agentDataList(1);
			},
			//获得焦点查询
			timeSeach() {
				this.agentDataList(1);
			},
			timeSeachLists() {
				console.log(111)
				this.agentListApi();
			},
			// 刷新方法
			reloadVal() {
				localStorage.setItem('activeName', this.editableTabsValue);
				this.reload();
			},
			getListData() {
				const _this = this;
				this.http.request({
					url: getAllList,
					data: '',
					method: 'GET',
					success: function(res) {
						_this.agentList = res;
					},
					error: function(err) {
						_this.$message({
							offset: '200',
							message: err.msg
						});
					}
				});
			},
			// 排序
			sortChange(sortData) {
				let orderBy;
				if (sortData.order != null) {
					orderBy = sortData.prop;
					if (sortData.order == 'ascending') {
						orderBy += ' asc';
					} else {
						orderBy += ' desc';
					}
				}
				this.agentDataList(1, orderBy);
			},
			//代理商级别
			tabTitleAgent(index) {
				const _this = this;
				_this.num = index;
				_this.agentDataList(1);
			},
			tabTitle(index, typeVal) {
				const _this = this;
				_this.num = index;
				_this.typeVal = typeVal;
				if (_this.idItem == 0) {
					_this.columnFind(1, agentAccountFlowList);
				} else if (_this.idItem == 1) {
					_this.columnFind(1, agentDividedList);
				} else if (_this.idItem == 3) {
					_this.columnFind(1, agentIncomeList);
				}
			},
			// 停启用
			changeSwitch(index, row) {
				const _this = this;
				let isEnabled = '';
				if (row.isEnabled == true) {
					isEnabled = 1;
				} else {
					isEnabled = 0;
				}
				let dataMsg = {
					ageId: row.agentInfoDTO.ageId,
					isEnabled: isEnabled
				};
				_this.http.request({
					url: agentStatus,
					data: dataMsg,
					success: function(res) {
						if (res == 0) {
							row.isEnabled = false;
						} else {
							row.isEnabled = true;
						}
					},
					error: function(err) {
						_this.$message({
							offset: '200',
							message: err.msg
						});
					}
				});
			},
			agentDataList(page, orderFlag) {
				const _this = this;
				_this.page.page = page;
				let startTime = _this.valueDate[0];
				let endTime = _this.valueDate[1];
				let obj = {
					page: _this.page.page,
					rows: _this.page.pagesize,
					keyword: undefined == _this.search.searchInput ? '' : _this.search.searchInput,
					startCreateTime: undefined == startTime ? '' : startTime,
					endCreateTime: undefined == endTime ? '' : endTime,
					signStatus: undefined == _this.search.sign ? '' : _this.search.sign,
					level: undefined == _this.num ? '' : _this.num,
					schemeId: undefined == _this.search.schemeId ? '' : _this.search.schemeId,
					orderBy: undefined == orderFlag ? '' : orderFlag
				};
				_this.http.request({
					url: agentListData,
					data: obj,
					success: function(res) {
						_this.loading = false;
						_this.tableDataAgent = res.list;
						_this.page.count = res.total;
					},
					error: function(err) {
						_this.$message({
							offset: '200',
							message: err.msg
						});
					}
				});
			},

			// 页面跳转至详情
			particulars(index, row) {
				let ageId = row.agentInfoDTO.ageId;
				const _this = this;
				_this.$router.push({
					path: './agentDetail',
					query: {
						id: ageId,
						name: '代理商管理>代理商管理详情'
					}
				});
			},
			listTab(refresh, type) {
				const _this = this;
				_this.typeVal = '';
				_this.num = '';
				_this.valueDate = '';
				_this.list = Cookie.get('tabList');
				if (_this.list) {
					_this.list = JSON.parse(Cookie.get('tabList'));
					for (let i = 0; i < _this.list.length; i++) {
						let newTabName = ++_this.tabIndex + '';
						_this.editableTabs.push({
							title: _this.list[i].name,
							name: newTabName,
							content: ''
						});
						_this.editableTabsValue = newTabName;
						var selectIndex = _this.list.length-1
						if (refresh) {
							selectIndex = type
						}
						else {
							localStorage.setItem('index', selectIndex+1)
						}
						if (i == selectIndex) {
							let item = _this.list[i];
							_this.selectTitleList = _this.titleList[item.idItem];
							let userName = item.userName;

							let userPhone = item.userPhone;
							if (_this.$route.query.id == item.agentId) {
								_this.nameAgent = userName + '/' + userPhone;
							} else {
								_this.nameAgent = userName + '/' + userPhone;
							}
							_this.urlApi = _this.apiList[item.idItem];
							_this.idItem = item.idItem;
							_this.columnFind(1, _this.urlApi);
							if (item.idItem == 0) {
								_this.tabs = [{
									id: 'balance0',
									name: '全部'
								}, {
									id: 'balance1',
									name: '入账'
								}, {
									id: 'balance2',
									name: '出账'
								}];
								_this.mold = '流水类型';
								_this.moldTypeTime = true;
							} else if (item.idItem == 1) {
								_this.mold = '分润类型';
								_this.moldTypeTime = true;
								_this.tabs = [{
									id: 'level0',
									name: '全部'
								}, {
									id: 'level1',
									name: '个人'
								}, {
									id: 'level2',
									name: '下级'
								}];
							} else if (item.idItem == 3) {
								_this.tabs = [{
									id: 'income0',
									name: '全部'
								}, {
									id: 'income1',
									name: '分润'
								}, {
									id: 'income2',
									name: '退款'
								}];
								_this.mold = '收入类型';
								_this.moldTypeTime = true;
							} else {
								_this.moldType = false;
								_this.moldTypeTime = true;
							}
						}
					}
					_this.showAgent = false;
				} else {
					_this.showAgent = true;
					_this.moldType = false;
					this.agentDataList(1);
				}
			},
			columnFindsss(page) {
				this.pages.page = page;
				this.columnFind(this.pages.page, this.urlApi);
			},
			//页面数据加载
			columnFind(page, urlApi) {
				const _this = this;
				let startTime = _this.valueDate[0];
				let endTime = _this.valueDate[1];
				let obj = {
					page: _this.pages.page,
					rows: _this.pages.pagesize,
					ageId: _this.$route.query.id,
					startCreateTime: undefined == startTime ? '' : startTime,
					endCreateTime: undefined == endTime ? '' : endTime,
					type: undefined == _this.typeVal ? '' : _this.typeVal
				};
				_this.http.request({
					url: urlApi,
					data: obj,
					success: function(res) {
						_this.loading = false;
						_this.tableData = res.list;
						_this.pages.count = res.total;
					},
					error: function(err) {
						_this.$message({
							offset: '200',
							message: err.msg
						});
					}
				});
			},
			tabData(tab) {
				console.log(tab)
				const _this = this;
				_this.typeVal = '';
				_this.num = '';
				_this.valueDate = '';
				let index = parseInt(tab.index);
				localStorage.setItem("index", index)
				if (index == 0) {
					_this.showAgent = true;
					_this.moldType = false;
					_this.moldTypeTime = false;
					_this.agentDataList(1);
				} else {
					_this.showAgent = false;
					_this.moldTypeTime = true;
					let item = this.list[index - 1];
					_this.selectTitleList = _this.titleList[item.idItem];
					let userName = item.userName;
					let userPhone = item.userPhone;
					_this.nameAgent = userName + '/' + userPhone;
					let urlApi = _this.apiList[item.idItem];
					_this.columnFind(1, urlApi);
					var idItem = item.idItem;
					_this.idItem = item.idItem;
					if (idItem == 0) {
						_this.tabs = [{
							id: 'balance0',
							name: '全部'
						}, {
							id: 'balance1',
							name: '入账'
						}, {
							id: 'balance2',
							name: '出账'
						}];
						_this.mold = '流水类型';
						_this.moldType = true;
					} else if (idItem == 1) {
						_this.mold = '分润类型';
						_this.moldType = true;
						_this.tabs = [{
							id: 'level0',
							name: '全部'
						}, {
							id: 'level1',
							name: '个人'
						}, {
							id: 'level2',
							name: '下级'
						}];
					} else if (idItem == 2) {
						_this.moldType = false;
					} else if (idItem == 3) {
						_this.tabs = [{
							id: 'income0',
							name: '全部'
						}, {
							id: 'income1',
							name: '分润'
						}, {
							id: 'income2',
							name: '退款'
						}];
						_this.mold = '收入类型';
						_this.moldType = true;
					} else {
						_this.moldType = false;
					}
				}
			},
			// 13个列表接口
			agentListApi() {
				const _this = this;
				console.log(_this.idItem)
				switch (_this.idItem) {
					case "0":
						_this.columnFind(1, agentAccountFlowList);
						break;
					case "1":
						_this.columnFind(1, agentDividedList);
						break;
					case "2":
						this.columnFind(1, agentDotLockFlowList);
						break;
					case "3":
						_this.columnFind(1, agentIncomeList);
						break;
					case "4":
						this.columnFind(1, agentMemList);
						break;
					case "5":
						this.columnFind(1, agentShopList);
						break;
					case "6":
						this.columnFind(1, agentPerdonList);
						break;
					case "7":
						this.columnFind(1, agentApprenticeList);
						break;
					case "8":
						this.columnFind(1, agentEquList);
						break;
					case "9":
						this.columnFind(1, agentOrderList);
						break;
					case "10":
						this.columnFind(1, agentApplyItemList);
						break;
					case "11":
						this.columnFind(1, agentDotUseList);
						break;
					case "12":
						this.columnFind(1, agentEquUseList);
						break;
				}
			},
			removeTab(targetName) {
				const _this = this;
				let index = parseInt(targetName) - 2;
				if (index <= 0) {
					_this.$message({
						offset: '200',
						message: '代理商管理不能被删除'
					});
					return;
				}

				let tabs = _this.editableTabs;
				let activeName = _this.editableTabsValue;
				if (activeName === targetName) {
					tabs.forEach((tab, index) => {
						if (tab.name === targetName) {
							let nextTab = tabs[index + 1] || tabs[index - 1];
							if (nextTab) {
								activeName = nextTab.name;
							}
						}
					});
				}
				_this.editableTabsValue = activeName;
				_this.editableTabs = tabs.filter(tab => tab.name !== targetName);
				_this.list.splice(index - 1, 1);
				if (_this.list.length == 0) {
					Cookie.remove('tabList');
				} else {
					Cookie.set('tabList', JSON.stringify(_this.list));
				}
				this.reload();
			}
		}
	};
</script>

<style lang="less">
	.el-tabs__item.is-active {
		color: #716aca;
	}
	.el-tabs__item:hover{
		color: #716aca;
		cursor: pointer;
	}
	.is-active:hover{
		color: #716aca;
	}

	.el-pagination.is-background .el-pager li:not(.disabled).active {
		background: #716aca;
	}

	.headerImg {
		width: 60px;
		height: 60px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.img_header {
		width: 42px;
		height: 42px;
		margin-right: 20px;
	}

	.agent_base {
		text-align: left;
	}

	.age_name {
		color: #6435c9;
		font-size: 14px;
	}

	.contract_no {
		color: #909399;
	}

	.x_soso {
		margin-left: 25px;
		margin-bottom: 0;
	}

	.rank {
		margin-right: 15px;
		font-size: 14px;
	}

	.rank.active {
		color: #716aca;
	}

	.el-input__inner {
		height: 35px;
	}

	.el-button {
		height: 35px;
		line-height: 0;
	}

	.el-button--primary {
		background: rgba(113, 106, 202, 1);
		border: none;
	}

	.el-button--primary:hover {
		color: #606266;
		background: rgba(255, 255, 255, 1);
		border: 1px solid rgba(113, 106, 202, 1);
	}
	.el-button--primary:focus{
		background: #716aca;
		border: 1px solid #716aca;
		color: white;
	}
</style>
